<div class="dashboard-list">
  <div class="page-action-bar page-action-bar--narrow" ng-hide="ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
    <label class="gf-form gf-form--grow gf-form--has-input-icon">
      <input type="text" class="gf-form-input max-width-30" placeholder="Search dashboards by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
      <i class="gf-form-input-icon fa fa-search"></i>
    </label>
    <div class="page-action-bar__spacer"></div>
    <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
      New Dashboard
    </a>
    <a class="btn btn-primary" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
      New Folder
    </a>
    <a class="btn btn-primary" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
      Import
    </a>
  </div>

  <div class="page-action-bar page-action-bar--narrow" ng-show="ctrl.hasFilters">
    <div class="gf-form-inline">
      <div class="gf-form" ng-show="ctrl.query.tag.length > 0">
        <label class="gf-form-label width-4">
          Tags
        </label>
        <div class="gf-form-input gf-form-input--plaintext" ng-show="ctrl.query.tag.length > 0">
          <span ng-repeat="tagName in ctrl.query.tag">
            <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="tag label label-tag">
              <i class="fa fa-remove"></i>&nbsp;{{tagName}}
            </a>
          </span>
        </div>
      </div>
      <div class="gf-form" ng-show="ctrl.query.starred">
        <label class="gf-form-label">
          <a class="pointer" ng-click="ctrl.removeStarred()">
            <i class="fa fa-fw fa-check"></i> Starred
          </a>
        </label>
      </div>
      <div class="gf-form">
        <label class="gf-form-label">
          <a class="pointer" ng-click="ctrl.clearFilters()" bs-tooltip="'Clear current search query and filters'">
            <i class="fa fa-remove"></i>&nbsp;Clear
          </a>
        </label>
      </div>
    </div>
  </div>

  <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
    <em class="muted">
      No dashboards matching your search were found.
    </em>
  </div>

	<div class="search-results" ng-show="!ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
    <em class="muted">
        No dashboards found.
    </em>
  </div>

  <div class="search-results" ng-show="ctrl.sections.length > 0">
    <search-filters
        on-select-all-changed="ctrl.onSelectAllChanged"
        all-checked="ctrl.selectAllChecked"
        can-move="ctrl.canMove"
        can-delete="ctrl.canDelete"
        move-to="ctrl.moveTo"
        delete-item="ctrl.delete"
        tag-filter-options="ctrl.tagFilterOptions"
        selected-starred-filter="ctrl.selectedStarredFilter"
        on-starred-filter-change="ctrl.onStarredFilterChange"
        selected-tag-filter="ctrl.selectedTagFilter"
        on-tagfilter-change="ctrl.onTagFilterChange"
    />
    <div class="search-results-container">
      <search-results
        results="ctrl.sections"
        editable="true"
        on-selection-changed="ctrl.selectionChanged"
        on-tag-selected="ctrl.filterByTag"
        on-toggle-selection="ctrl.toggleSelection"
      />
    </div>
  </div>

</div>

<div ng-if="ctrl.canSave && ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
  <empty-list-cta
    title="'This folder doesn\'t have any dashboards yet'"
    buttonIcon="'gicon gicon-dashboard-new'"
    buttonLink="'dashboard/new?folderId={{ctrl.folderId}}'"
    buttonTitle="'Create Dashboard'"
    proTip="'Add/move dashboards to your folder at ->'"
    proTipLink="'dashboards'"
    proTipLinkTitle="'Manage dashboards'"
    proTipTarget=""
  />
</div>
